<template>
  <div class="box" v-if="UserFalge">
    <van-grid class="grid" :border="false">
      <van-grid-item
        v-for="(item, index) in arr"
        :key="index"
        class="item"
        column-num:2
        :icon="item.icon"
        :text="item.text"
        @click="onClick"
      />
    </van-grid>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// 导入地址请求
import { Toast } from "vant";
import { getRess, getRegion } from "../../https/http";
export default {
  name: "Section",
  data() {
    return {
      falge: true,
      arr: [
        { text: "我的订单", icon: "label-o" },
        { text: "优惠券", icon: "bill-o" },
        { text: "礼品卡", icon: "bag-o" },
        { text: "我的收藏", icon: "location-o" },
        { text: "我的足迹", icon: "flag-o" },
        { text: "地址管理", icon: "location-o" },
        { text: "账号安全", icon: "warn-o" },
        { text: "会员福利", icon: "contact" },
        { text: "帮助中心", icon: "question-o" },
        { text: "意见反馈", icon: "phone-o" },
      ],
      oneBrr: [], //北京 天京 辽宁 ....
      twoBrr: [], //查询市以下的 但是没啥用
    };
  },
  methods: {
    ...mapMutations(["Uchange", "chanGe"]),
    // 获取售后地址 空.....
    fn(val) {
      // if (val == "地址管理") {
      let str = localStorage.getItem("token");
      getRess(str).then((res) => {
        console.log("获取收货地址响应数据为", res);
      });
      // }
    },
    // 查询 oneBrr towBrr
    fn2() {
      getRegion(1).then((res) => {
        // console.log(res);
        this.oneBrr = res.data;
        this.oneBrr.forEach((item) => {
          // console.log(item.id);
          this.twoBrr.push(item.id); //查询市以下的 但是没啥用
        });
        // console.log(this.twoBrr);
      });
    },
    onClick() {
      if (!localStorage.getItem("token")) {
        Toast("请先登录");
        return;
      }
      this.Uchange();
      this.chanGe();
      this.$router.push({ name: "Ress", params: { oneBrr: this.oneBrr } });
      // console.log(this.UserFalge);
    },
  },
  computed: {
    ...mapState(["UserFalge"]),
  },
  created() {
    this.fn();
    this.fn2();
  },
};
</script>

<style scoped lang="less">
.box {
  position: relative;
  .grid {
    margin: 10px 0px 0px 0px;
    // background: cornflowerblue;

    .item {
      margin: 30px 15px 20px 15px;
    }
  }
}
</style>